﻿@page "/dropdowns"

<Block Title="Dropdown 下拉菜单" Introduction="使用 TagName='a' 开启带有 button 标签的下拉表">
    <CardBodyTemplate>
        <Dropdown Items="items" OnValueChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
        <Logger @ref="Trace" class="mt-3" />
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Secondary""&gt;&lt;/Dropdown&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="带有颜色的下拉框" Introduction='提供各种颜色的警告信息框 引用 Color="Color.Primary" 等颜色及样式类来定义下拉菜单的外在表现'>
    <CardBodyTemplate>
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Primary"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Secondary"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Info"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Warning"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Danger"></Dropdown></div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Primary""&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Secondary""&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Info""&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Warning""&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Danger""&gt;&lt;/Dropdown&gt;
    </pre>
    </CodeTemplate>
</Block>

<Block Title="分裂式按钮下拉菜单" Introduction='可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，添加 ShowSplit="true"(使用分裂式组件时需要加上DropdownType="DropdownType.ButtonGroup") 插入此符号为下拉选项作适当的间隔（距）处理。'>
    <CardBodyTemplate>
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown DropdownType="DropdownType.ButtonGroup" Items="items" ShowSplit="true" Color="Color.Primary"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown DropdownType="DropdownType.ButtonGroup" Items="items" ShowSplit="true" Color="Color.Secondary"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown DropdownType="DropdownType.ButtonGroup" Items="items" ShowSplit="true" Color="Color.Info"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown DropdownType="DropdownType.ButtonGroup" Items="items" ShowSplit="true" Color="Color.Warning"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown DropdownType="DropdownType.ButtonGroup" Items="items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Primary" ShowSplit="true"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Secondary" ShowSplit="true"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Info" ShowSplit="true"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Warning" ShowSplit="true"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Color="Color.Danger" ShowSplit="true"&gt;&lt;/Dropdown&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="尺寸大小定义" Introduction="下拉菜单有各种大小规格可以选用Size属性，包括预设及分裂式按钮下拉菜单。">
    <CardBodyTemplate>
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Size="Size.ExtraSmall"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Size="Size.Small"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Size="Size.Medium"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Size="Size.Large"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Size="Size.ExtraLarge"></Dropdown></div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Color="Color.Primary Items="items" Size="Size.ExtraSmall"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Size="Size.Small"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Size="Size.Medium"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Size="Size.Large"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Color="Color.Primary Items="items" Size="Size.ExtraLarge"&gt;&lt;/Dropdown&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="展开方向" Introduction='增加 Direction="Direction.Dropup" 样式，使下拉菜单向上展开。'>
    <CardBodyTemplate>
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Direction="Direction.Dropleft"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Direction="Direction.Dropup"></Dropdown></div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Direction="Direction.Dropright"></Dropdown></div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Items="items" Items="items" Direction="Direction.Dropleft"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Items="items" Items="items" Direction="Direction.Dropup"&gt;&lt;/Dropdown&gt;
&lt;Dropdown Items="items" Items="items" Direction="Direction.Dropright"&gt;&lt;/Dropdown&gt;
        </pre>
    </CodeTemplate>
</Block>

<Block Title="菜单对齐" Introduction='默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。'>
    <CardBodyTemplate>
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown Items="items" Color="Color.Secondary" MenuAlignment="Alignment.Right"></Dropdown></div>
        </div>
    </CardBodyTemplate>
    <CodeTemplate>
        <pre>
&lt;Dropdown Color="Color.Primary Items="items" MenuAlignment="Alignment.Right"&gt;&lt;/Dropdown&gt;
        </pre>
    </CodeTemplate>
</Block>

<AttributeTable Items="@GetAttributes()" />
